import React from 'react'
import { TrCarousel } from './components/trCarousel/TrCarousel'
import { TrSideMenu } from './components/trSideMenu/TrSideMenu'
import { Col, Row, Typography } from 'antd'
import { TrProductCollection } from './components/trProductCollection/TrProductCollection'
import sideImage from '../../assets/images/sider_2019_02-04-2.png'
import sideImage2 from '../../assets/images/sider_2019_02-04.png'
import sideImage3 from '../../assets/images/sider_2019_12-09.png'
import { productList1, productList2, productList3 } from './mockups'

export const TrMiddle: React.FC = () => {
  return (
    <React.Fragment>
      <Row style={{ marginTop: 20 }}>
        <Col span={6}>
          <TrSideMenu />
        </Col>
        <Col span={18}>
          <TrCarousel />
        </Col>
      </Row>
      <TrProductCollection
        title={
          <Typography.Title level={3} type='danger'>
            新品上市
          </Typography.Title>
        }
        sideImage={sideImage2}
        products={productList2}
      />
      <TrProductCollection
        title={
          <Typography.Title level={3} type='warning'>
            爆款推荐
          </Typography.Title>
        }
        sideImage={sideImage}
        products={productList1}
      />
      <TrProductCollection
        title={
          <Typography.Title level={3} type='success'>
            国内游推荐
          </Typography.Title>
        }
        sideImage={sideImage3}
        products={productList3}
      />
    </React.Fragment>
  )
}
